<meta charset="utf-8" />	
<form class="form-horizontal" role="form" onsubmit="return submitForm(this);">
 <table id="optionAddTable"></table>
 <div id="btn-add" class="btn btn-info" style='margin-top:20px' onclick="addTable()"> 
				新增列
			</div>
			<div id="btn-delete" class="btn btn-info" style='margin-top:20px' onclick="removeTable()"> 
				删除列
			</div>
 <div class="form-actions align-right  form-button-box" style="margin-top: 10px">
			<button class="btn btn-info" type="submit">
				保存
			</button>
			&nbsp; 
			<button class="btn" type="button" onclick="javascript:dialog.close(this);">
				 关闭
			</button>
		</div>
</form>
<script type="text/javascript">
function addTable(){
	var date={0:{id:'optionValue',value:'选项值',width:'200px',type:'text'},
			  1:{id:'optionName',value:'选项名称',width:'200px',type:'text'},
			  2:{id:'optionDesc',value:'选项描述',width:'400px',type:'text'}};
	var tr=$('<tr></tr>').addClass("optionAddTr");
	if(($('#optionAddTable').find('tr').length)%2==0){
		tr.attr('style','background-color:#e9e9e9;height:42px');
	}else{
		tr.attr('style','height:42px');
	}
	var initTd=$('<td style=\'width:50px;border: #c7c4c4 1px solid;\'></td>');
	initTd.append($('<div style=\'margin-left:10px;float:left\' id=\'optionDiv\'>'+($('#optionAddTable').find('tr').length+1)+'</div>'))
	.append($('<div style=\'float:left;margin-left:10px\'>'+getInputText('checkbox','','','checkbox_'+($('#optionAddTable').find('tr').length+1))+'</div>'))
	.appendTo(tr);
	for(var i=0;i<Object.keys(date).length;i++){
		tr.append($('<td style=\'border: #c7c4c4 1px solid;\'>'+getInputText(date[i].type,date[i].value,date[i].width,date[i].id)+'</td>').addClass("optionAddTd"));
	}
	$('#optionAddTable').append(tr);

}
function removeTable(){
	var checkBoxList=$('#optionAddTable').find('input[type=\'checkbox\']');
	for(var i=0;i<checkBoxList.length;i++){
		if(checkBoxList[i].checked){
			$(checkBoxList[i]).parent().parent().parent().remove();
		}
	}
	refreshTable();
}
function refreshTable(){
	var optionAddTableList=$('#optionAddTable').find('tr');
	for(var i=0;i<optionAddTableList.length;i++){
		if(i%2==0){
			$(optionAddTableList[i]).attr('style','background-color:#e9e9e9;height:42px');
		}else{
			$(optionAddTableList[i]).attr('style','height:42px');
		}
		$(optionAddTableList[i]).find('#optionDiv').html(i+1);
	}
}
function getInputText(inputType,placeholderValue,width,id){
	return '<input type=\''+inputType+'\' placeholder=\'请输入'+placeholderValue+'\' id=\''+id+'\' style=\'width:'+width+'\'/>';
}
function submitForm(obj){
	var jsonList=[];
	var optionAddTableList=$('#optionAddTable').find('tr');
	for(var i=0;i<optionAddTableList.length;i++){
		var jsonData={
				'optionValue':$(optionAddTableList[i]).find('#optionValue').val(),
				'optionName':$(optionAddTableList[i]).find('#optionName').val(),
				'optionDesc':$(optionAddTableList[i]).find('#optionDesc').val()
		};
		jsonList.push(jsonData);
	}
	$.ajax({
	       url:'mpomng/option/saveOption.do', 
	       type:'post',         
	       dataType:'json',    
	       contentType:"application/json",
	       data:JSON.stringify(jsonList),        
	       success : function(result) {
				if (result.rspcod != "200") {
					$msg.alert("错误", result.rspmsg + " 错误代码："
							+ result.rspcod, 'error');
				} else {
					msg.alert("提示", result.rspmsg, 'correct');
					$("#grid-table").trigger("reloadGrid");
					dialog.close(obj);
				}
			},
		  error:function(XMLHttpRequest, textStatus){
			  $msg.alert("错误", textStatus + " 错误代码："
						+ XMLHttpRequest.status, 'error');
			}
	     });
}
</script>

